<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>自定义指令</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!--
        需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
        需求2：定义一个v-f-bind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

        自定义指令:
            一、定义语法：
                (1).局部指令：
                    new Vue({                              new Vue({
                        directives: {指令名:配置对象}  或       directives: {指令名:函数}
                    })                                     })
                (2).全局指令：
                    Vue.directive(指令名, 配置对象)  或  Vue.directive(指令名, 回调函数)

            二、配置对象中常用的3个回调：
                (1). bind：指令与元素成功绑定时调用。
                (2). inserted：指令所在元素被插入页面时调用。
                (3). update：指令所在模板结构被重新解析时调用。

            三、备注：
                1. 指令定文时不加 v-，但使用时要加 v-；
                2. 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

    -->

    <div id="root">
      <h2>{{name}}</h2>
      <h2>当前的n值是：<span v-text="n"></span></h2>
      <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
      <button @click="name = '李四'">点我改名“李四”</button>
      <button @click="n++">点我n+1</button>
      <br /><br />
      <input type="text" v-f-bind:value="n" />
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;
    Vue.directive("f-bind", {
      bind(el, binding) {
        el.value = binding.value;
      },
      inserted(el, binding) {
        el.focus();
      },
      update(el, binding) {
        el.value = binding.value;
      },
    });

    new Vue({
      el: "#root",
      data: {
        name: "张三",
        n: 1,
      },
      directives: {
        // big函数何时被调用？1.指令与元素成功绑定时；2.指令所在的模板被重新解析时。
        big(el, binding, vnode) {
          // console.log(this === window);// true
          // console.log(el instanceof HTMLElement, binding, vnode);
          console.log("@@@big被调用了");
          el.innerText = binding.value * 10;
        },
        /* 'f-bind': {
            //指令与元素成功绑定时
            bind(el, binding) {
                el.value = binding.value;
            },
            //指令所在元素被插入页面时
            inserted(el, binding) {
                el.focus();
            },
            //指令所在的模板被重新解析时
            update(el, binding) {
                el.value = binding.value;
            }
        } */
      },
    });
  </script>
</html>
